<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <style>
        .echartMap div {
            position: absolute;
            overflow: auto;
        }
    </style>
</head>

<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="./lib/echarts-all-3.js"></script>
<!--<script type="text/javascript" src="./node_modules/echarts/echarts.all.js"></script>-->
<script src='./lib/mapbox-gl-dev.js'></script>
<link href='./lib/mapbox-gl.css' rel='stylesheet' />
<script type="text/javascript" src="../dist/EchartsLayer.js"></script>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZ2lzbGV1bmciLCJhIjoiY2toYWZxZHRuMDJoNTJyc3R3bzV0NXJuYiJ9.byX_qjodsw10HkWXH586fA'
    var map = new mapboxgl.Map({
        container: document.getElementById('container'),
        pitchWithRotate: true, //是否启用倾斜（3D）
        dragRotate: true,//是否启用旋转
        maxZoom: 18,
        minZoom: 0,
        // center: [119.652, 30.054],
        zoom: 3,
        center: [105.106, 31.357],//中国
        style: 'mapbox://styles/mapbox/dark-v9',
        attributionControl: false,
        renderWorldCopies: false,//地图缩小至全世界时，是否平铺
    });

    map.addControl(new mapboxgl.NavigationControl())
    // option2.GLMap.map=map;
    map.on('load', function () {
        $.getJSON('./data/HZ_all.json', hzRiver=>{
            //组织数据
            let data = [];
            hzRiver.features.forEach(featureItem => {
                if (featureItem.geometry.type === 'LineString') {
                    let dataItem = {
                        coords: featureItem.geometry.coordinates,//[ [lng,lat], [lng,lat], [lng,lat] ]
                        lineStyle: {
                            "normal": {
                                "color": "rgba(90,161,223,1)"
                            }
                        }
                    };
                    data.push(dataItem)
                }
            });


            let option = {
                animation: false,
                GLMap: {
                    roam: true
                },
                coordinateSystem: 'GLMap',
                geo: {
                    map: 'GLMap',
                },

                series: [{
                    type: 'lines',
                    polyline: true,
                    data: data,
                    silent: true,
                    lineStyle: {
                        normal: {
                            opacity: 0.2,
                            width: 1
                        }
                    },
                    progressiveThreshold: 500,
                    progressive: 100,
                }, {

                    type: 'lines',
                    coordinateSystem: 'GLMap',
                    polyline: true,
                    data: data,
                    lineStyle: {
                        normal: {
                            width: 0.2
                        }
                    },
                    effect: {
                        constantSpeed: 40,      // 动态圆点的速度
                        show: true,
                        trailLength: 0.4,      // 动态圆点的尾巴长度
                        symbolSize: 4           // 动态圆点的大小
                    },
                }]
            };
            // this.echartslayer = new EchartsLayer(Mapbox);
            var echartslayer = new EchartsLayer(map);
            echartslayer.chart.setOption(option);
        })

        // var echartslayer = new EchartsLayer(map);
        // echartslayer.chart.setOption(option);

    })
</script>
</body>

</html>
